<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        a {
            text-decoration: none;
        }
        #layout {
            max-width: 750px;
            min-width: 320px;
            width: 100%;
            margin: 0 auto;
            position: relative;
            border:1px solid #9ea6b9;
        }
        .form-group {
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            margin:10px 0;
            padding:0 15px;
            font-size:0;
            width: 100%;
        }
        .form-group label,.form-group span {
            display: inline-block;
            width:30%;
        }
        .form-group input {
            width: 70%;
        }
        .form-group label,.form-group input,.form-group span,#btn-submit {
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            font-size:16px;
            height: 36px;
            line-height:36px;
            padding:0 15px;
        }
        .form-group input[type='radio'] {
            display: none;
        }
        .form-group .radio {
            text-align: center;
            border:1px solid #1ab394;
            color: #1ab394;
            letter-spacing:5px;
        }
        .form-group input:checked+label {
            background-color: #1ab394;
            color: #fff;
        }
        #btn-submit {
            display: inline-block;
            width:50%;
            /*border:1px solid #1ab394;*/
            background-color: #1ab394;
            color: #fff;
        }
    </style>
</head>
<body>
    <div id="layout">
        <form class="form">
            <div class="form-group">
                <label for="deal-price">核定价格: </label>
                <input type="text" id="deal-price" name="dealPrice">
            </div>
            <div class="form-group">
                <label for="value-added-tax">增值税: </label>
                <input type="text" id="value-added-tax" name="valueAddedTax">
            </div>
            <div class="form-group">
                <span>是否首购：</span>
                <input type="radio" id="firstPur" name="firstPur" value="firstPur">
                <label for="firstPur" class="radio">首购</label>
                <input type="radio" id="unFirstPur" name="firstPur" value="unFirstPur">
                <label for="unFirstPur" class="radio" style="margin-left: 10%">非首购</label>
            </div>
            <div class="form-group">
                <label for="houseArea">住宅面积: </label>
                <input type="text" id="houseArea" name="houseArea">
            </div>
            <div style="height: 120px;line-height: 120px;text-align: center;">

            </div>
            <div class="form-group" style="text-align: center;">
                <a href="javascript:;" id="btn-submit">提交计算</a>
            </div>
            <!--<input type="hidden" name="photoPrice" value="25">-->
            <!--<input type="hidden" name="stampTax" value="5">-->
            <!--<input type="hidden" name="registerPrice" value="40">-->
            <!--<input type="hidden" name="mortgagePrice" value="40">-->
            <input type="hidden" name="otherPrice" value="110">
        </form>
    </div>
    <script type="text/javascript" src="{{basePath}}/plugins/jquery.min.js"></script>
    <script>
        var myForm=$("form");
        $("#btn-submit").on("click",function (e) {
            var json=getJsonByForm(myForm);
            console.log(json);
            var firstPur=json.firstPur;
            var houseArea=json.houseArea;
            var minus=json.dealPrice-json.valueAddedTax;
            console.log(minus);
            var taxValue;
            if(!!firstPur){
                if(firstPur=="firstPur"){
                    if(houseArea>0 && houseArea<=90){
                        taxValue=minus*0.01;
                    }else if(houseArea>0 && houseArea>90){
                        taxValue=minus*0.15;
                    }
                }else if(firstPur=="unFirstPur"){
                    taxValue=minus*0.03;
                }
            }
            taxValue+=110;
        });

        function getJsonByForm(form) {
            var arr=$(form).serializeArray();
            var json={};
            $.each(arr,function (idx, ele) {
                json[ele.name]=ele.value;
            });
            return json;
        }
    </script>
</body>
</html>